<template>
	<div class="price_tag d-f" :style="{color:amountColor}">
		<span class="currency" :style="{'font-size':currencyFontSize + 'px'}">￥</span>
		<span class="big_amount" :style="{'font-size':beforeFontSize + 'px'}">{{ getPriceFormat(amount)[0] }}</span>.
		<span class="small_amount" :style="{'font-size':afterFontSize + 'px'}">{{ getPriceFormat(amount)[1] }}</span>
	</div>
</template>

<script>
	export default {
		name: "PriceTag",
		props: {
			amount: {
				type: [String, Number],
				default: 0,
			},
			amountColor: {
				type: String,
				default: "#000",
			}, //金额颜色
			currencyFontSize: {
				type: Number,
				default: 12,
			}, //符号字体大小
			beforeFontSize: {
				type: Number,
				default: 20,
			}, //前部分金额字体大小
			afterFontSize: {
				type: Number,
				default: 12,
			}, //后部分金额字体大小
		},
		methods: {
			getPriceFormat(number, decimals = 2, decPoint = '.', thousandsSep = ',') {
				number = (number + '').replace(/[^0-9+-Ee.]/g, '')
				let n = !isFinite(+number) ? 0 : +number
				let prec = !isFinite(+decimals) ? 0 : Math.abs(decimals)
				let sep = (typeof thousandsSep === 'undefined') ? ',' : thousandsSep
				let dec = (typeof decPoint === 'undefined') ? '.' : decPoint
				let s = ''
				let toFixedFix = function(n, prec) {
					let k = Math.pow(10, prec)
					return '' + Math.ceil(n * k) / k
				}
				s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.')
				let re = /(-?\d+)(\d{3})/
				while (re.test(s[0])) {
					s[0] = s[0].replace(re, '$1' + sep + '$2')
				}
				if ((s[1] || '').length < prec) {
					s[1] = s[1] || ''
					s[1] += new Array(prec - s[1].length + 1).join('0')
				}
				return s.join(dec).split('.');
			},
		}
	}
</script>

<style scoped lang="scss">
	.price_tag {
		align-items: baseline;

		.currency {
			font-size: 13px;
		}

		.big_amount {
			font-size: 18px;
		}

		.small_amount {
			font-size: 13px;
		}
	}
</style>